<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
   <![endif]-->
    <!-- 引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="./bootsrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"] {
            border: 1px solid #333;
        }

        .container .row:nth-child(1) {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <!-- 响应式布局固定宽度 container -->
    <!-- 大屏（>=1200px） 宽度定为 1170px -->
    <!-- 中屏（>=992px）  宽度定为 970px -->
    <!-- 小屏（>=768px）  宽度定为 750px-->
    <!-- 超小屏（100%） -->

    <!-- 类前缀 -->
    <!-- .col-lg-份数     -------------宽屏设备 -->
    <!-- .col-md-份数     -------------中等屏幕 -->
    <!-- .col-sm-份数     -------------小屏设备 -->
    <!-- .col-xs-份数     -------------超小屏幕 -->

    <!-- container和每一列 都会有一个左右的padding值 -->
    <div class="container">
        <!-- 行 -->
        <div class="row">
            <!-- 可以同时为一列指定多个设备类名，以便划分不同份数 如下： -->
            
            <!-- 当屏幕宽度大于等于1200px  则按照 col-lg-3进行布局，总共12份，每个盒子占据3份 -->
            <!-- 当屏幕宽度小于1200px   则按照 col-md-4进行布局，第四个盒子另起一行 -->
            <!-- 当屏幕宽度小于992px   则按照 col-sm-6进行布局，第三第四个盒子另起一行 -->
            <!-- 当屏幕宽度小于768px   则按照 col-xs-12进行布局，每行一个盒子 -->
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
        <!-- 行 -->
        <div class="row">
            <!-- 总共12份，第一盒子占6份，剩余的其他每个盒子两份 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
        <!-- 行 -->
        <div class="row">
            <!-- 如果份数小于12份，则占不满整个container 的宽度 会有空白-->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>
        <!-- 行 -->
        <div class="row">
            <!-- 如果份数大于12份，则多余的那一列会另起一行显示-->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>
</body>

</html>